<!--
 * @Author: xin yuan_miao 835539119@qq.com
 * @Date: 2025-09-11 10:20:30
 * @LastEditors: xin yuan_miao 835539119@qq.com
 * @LastEditTime: 2025-09-17 15:13:27
 * @FilePath: \23前端\city\src\pages\components\Bottom2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--------------------------- 1.模板部分分析 ---------------------------------------------->
<template>
  <div class="facility-pie-container">
    <!-- 标题 -->
    <div class="chart-title">城市基础设施类型占比</div>
    <!-- 饼图容器 -->
    <div ref="pieContainer" style="height: 200px; width: 100%;"></div>
    <!-- 数据说明 -->
    <div class="data-note">
      <span>注：点击图例可筛选地图对应设施</span>
    </div>
  </div>
</template>

<!--------------------------- 2.脚本部分分析 ---------------------------------------------->
<script>
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';

//3.2 数据与状态
export default {
  data() {
    return {
      piePlot: null, // 饼图实例
      facilityData: [], // 设施类型数据
      refreshTimer: null // 定时刷新计时器
    };
  },

  methods: {
    loadPie() {
      // const data = [
      //   { type: '分类一', value: 27 },
      //   { type: '分类二', value: 25 },
      //   { type: '分类三', value: 18 },
      //   { type: '分类四', value: 15 },
      //   { type: '分类五', value: 10 },
      //   { type: '其他', value: 5 },
      // ];
      const piePlot = new Pie(this.$refs.pieContainer, {
        appendPadding: 10,
        data:this.facilityData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.9,
        legend:{
          itemName:{
            style:{
              fill:'white'
            }
          }
        },
        label: {
          type: 'outer',
          offset: '-30%',
          content:"{name}{value}",
          style: {
            fontSize: 14,
            fill:"white",
            textAlign: 'center',
          },
        },
        interactions: [{ type: 'element-active' }],
      });

      piePlot.render();
    },
    async getEngData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      this.facilityData = res.data;
    }
  },

  async mounted() {
    await this.getEngData();
    this.loadPie();
  },
}
</script>

<style lang="less" scoped>
.facility-pie-container {
  padding: 10px;
  background: rgba(10, 30, 60, 0.3); // 深色背景适配大屏
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.chart-title {
  font-size: 14px;
  font-weight: 500;
  color: white;
  margin-bottom: 8px;
  text-align: center;
}

.data-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 8px;
}
</style>
